<!DOCTYPE html>
<html lang="en">
<head>
    <link href="../../css/bootstrap.css" rel="stylesheet">
    <link href="../../css/style.css" rel="stylesheet">
    <link href="../../css/bootstrap-theme.min.css">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/bootstrap.js"></script>
    <meta charset="UTF-8">
    <title>List Dish</title>
</head>
<body class="layout-background">
<nav class="navbar navbar-default nav-bar">
    <div class="layout-width" >
        <div class="navbar-header">
            <a href="javascript:void(0)" class="navbar-brand">ITA Order System</a>
        </div>
        <div class="pull-right" style="font-size: 20px;position: relative;top: 10px;right: 55px;">
            <label class="control-label">Hello: </label>
            <a href="merchantHome.html">Freedy</a>
            <div style="margin-left: 70px;margin-top: -8px;">
                <a class="btn btn-danger btn-xs" href="javascript:void(0)">Logout</a>
            </div>
        </div>
    </div>
</nav>
<div class="container">
    <ul class="nav nav-tabs" style="border-bottom: 0px;">
        <li role="presentation"><a href="merchantHome.html">Home</a></li>
        <li role="presentation" class="active"><a href="#">Dish List</a></li>
        <li role="presentation"><a href="./editInfo.html">Update Info</a></li>
    </ul>
    <br/>
    <div style="background-color: #fff;min-height: 760px;height: auto;;margin-top: -20px;border: 1px solid #ddd;">
        <div style="width: 95%;margin: auto;">
            <h2>
                Dish List
                <small>You can update your dish list here.</small>
            </h2>
            <a class="btn btn-primary pull-right" style="position: relative;right: 20px;bottom: 20px;" href="addDish.html">Add Dish</a>
        </div>
        <br/>
        <div style="position: relative;width: 95%;border: 1px solid #ddd;margin: auto;">
            <table class="table table-striped text-center table-hover">
                <thead>
                <tr>
                    <td>Image</td>
                    <td>Name</td>
                    <td>Price</td>
                    <td></td>
                    <td></td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td width="20%">
                        <img style="width: 150px" src="../../images/img1.jpg">
                    </td>
                    <td width="20%" style="vertical-align: middle">Dish Name</td>
                    <td width="20%" style="vertical-align: middle">Dish Price</td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-info" href="editDish.html">Update</a>
                    </td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Delete</a>
                        <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        Warning
                                    </div>
                                    <div class="modal-body">
                                        Are you sure to delete this dish?
                                    </div>
                                    <div class="text-right" style="padding-right: 15px;padding-bottom: 7px;">
                                        <button class="btn btn-danger"> Yes </button>
                                        &nbsp;&nbsp;&nbsp;
                                        <button class="btn btn-info" data-dismiss="modal"> Cancel </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td width="20%">
                        <img style="width: 150px" src="../../images/img1.jpg">
                    </td>
                    <td width="20%" style="vertical-align: middle">Dish Name</td>
                    <td width="20%" style="vertical-align: middle">Dish Price</td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-info">Update</a>
                    </td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-danger">Delete</a>
                    </td>
                </tr><tr>
                    <td width="20%">
                        <img style="width: 150px" src="../../images/img1.jpg">
                    </td>
                    <td width="20%" style="vertical-align: middle">Dish Name</td>
                    <td width="20%" style="vertical-align: middle">Dish Price</td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-info">Update</a>
                    </td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-danger">Delete</a>
                    </td>
                </tr><tr>
                    <td width="20%">
                        <img style="width: 150px" src="../../images/img1.jpg">
                    </td>
                    <td width="20%" style="vertical-align: middle">Dish Name</td>
                    <td width="20%" style="vertical-align: middle">Dish Price</td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-info">Update</a>
                    </td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-danger">Delete</a>
                    </td>
                </tr><tr>
                    <td width="20%">
                        <img style="width: 150px" src="../../images/img1.jpg">
                    </td>
                    <td width="20%" style="vertical-align: middle">Dish Name</td>
                    <td width="20%" style="vertical-align: middle">Dish Price</td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-info">Update</a>
                    </td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-danger">Delete</a>
                    </td>
                </tr><tr>
                    <td width="20%">
                        <img style="width: 150px" src="../../images/img1.jpg">
                    </td>
                    <td width="20%" style="vertical-align: middle">Dish Name</td>
                    <td width="20%" style="vertical-align: middle">Dish Price</td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-info">Update</a>
                    </td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-danger">Delete</a>
                    </td>
                </tr><tr>
                    <td width="20%">
                        <img style="width: 150px" src="../../images/img1.jpg">
                    </td>
                    <td width="20%" style="vertical-align: middle">Dish Name</td>
                    <td width="20%" style="vertical-align: middle">Dish Price</td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-info">Update</a>
                    </td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-danger">Delete</a>
                    </td>
                </tr><tr>
                    <td width="20%">
                        <img style="width: 150px" src="../../images/img1.jpg">
                    </td>
                    <td width="20%" style="vertical-align: middle">Dish Name</td>
                    <td width="20%" style="vertical-align: middle">Dish Price</td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-info">Update</a>
                    </td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-danger">Delete</a>
                    </td>
                </tr><tr>
                    <td width="20%">
                        <img style="width: 150px" src="../../images/img1.jpg">
                    </td>
                    <td width="20%" style="vertical-align: middle">Dish Name</td>
                    <td width="20%" style="vertical-align: middle">Dish Price</td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-info">Update</a>
                    </td>
                    <td width="20%" style="vertical-align: middle">
                        <a class="btn btn-danger">Delete</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <nav class="text-center">
            <ul class="pagination">
                <li class="disabled">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li class="active">
                    <a href="#">1 <span class="sr-only">(current)</span></a>
                </li>
                <li>
                    <a href="#">2 </a>
                </li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

</body>
</html>